<template>
  <view class="titleArea">
    <view :class="[{ hasError }]">
      <up-form-item prop="title" ref="itemInputTitleRef">
        <up-input
          :modelValue="modelValue"
          :placeholder="`标题（必填, ${rules.title.min}-${rules.title.max}个字）`"
          border="none"
          placeholderClass="customInputPlaceholder"
          fontSize="30rpx"
          @change="change"
        >
          <template v-slot:suffix class="">
            <view class="suffix">
              <text
                :class="[{ overstep: modelValue.length > rules.title.max }]"
                >{{ modelValue.length }}</text
              >/{{ rules.title.max }}
            </view>
          </template>
        </up-input>
      </up-form-item>
    </view>
  </view>
</template>

<script setup>
import { ref, toRef, watch, inject, computed } from 'vue';

const rules = inject('rules');

const props = defineProps({
  modelValue: {
    type: String,
    default: '0',
  },
});
const modelValue = toRef(props, 'modelValue');
const emit = defineEmits(['update:modelValue']);

const change = (val) => {
  emit('update:modelValue', val);
};

// 通过formItem内部的message来判断当前是不是存在error
const itemInputTitleRef = ref(null);
const hasError = computed(() => {
  return itemInputTitleRef?.value?.message;
});
</script>

<style lang="scss">
.titleArea {
  padding: 0 30rpx;
  border-radius: 10rpx;
  overflow: hidden;

  > view {
    padding: 19rpx;
    background: #fff;
    border: 1px solid #fff;
  }

  .hasError {
    border: 1px dashed #f56c6c;
  }

  .overstep {
    color: #f56c6c;
  }

  .suffix {
    color: #909193;
  }
}
</style>
